<template>
	<el-dialog title="编辑 Model" :visible.sync="dialogData.showEditDialog" width="450px" @close="cancelForm">

		<el-form ref="model" :model="model" :rules="rules" :label-position="labelPosition"
			:label-width="formLabelWidth">
			<el-form-item label="用户名" prop="userName">
				<el-input v-model="model.userName"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="model.password"></el-input>
			</el-form-item>
			<el-form-item label="联系方式" prop="userPhone">
				<el-input v-model="model.userPhone"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="model.email"></el-input>
			</el-form-item>
			<el-form-item label="账户余额" prop="money">
				<el-input v-model="model.money"></el-input>
			</el-form-item>
			<el-form-item label="权限" prop="role">
				<el-select v-model="model.role" placeholder="">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelForm()">取 消</el-button>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: "UserEdit",
	props: {
		// 使用 props 属性接收父组件传递的参数
		dialogData: {
			type: Object,
			default: {
				id: 0,
				showEditDialog: false,
			},
		},
	},
	data: function () {
		return {
			//角色选择
			options: [{
				value: 'normal',
				label: '普通用户'
			}, {
				value: 'admin',
				label: '管理员'
			}],
			value: '',

			// 弹出框设置项
			formLabelWidth: "80px",
			labelPosition: "right",
			model: {
				id: 0,
				userName: "",
				password: "",
			},
			rules: {
				userName: [
					{
						required: true,
						message: "用户名不能为空",
						trigger: ["blur", "change"],
					},
				],
				password: [
					{
						required: true,
						message: "密码不能为空",
						trigger: ["blur", "change"],
					},
					{
						min: 6, message: '请输入至少6位的号码', trigger: 'blur'
					},
				],
				userPhone: [
					{
						required: false,
						message: '请输入电话号码',
						trigger: ["blur", "change"],
					},
					{

						min: 11, max: 11, message: '请输入11位的号码', trigger: 'blur'
					},
					{
						pattern: /^1[123456789]\d{9}$/,
						message: '请输入正确的手机号码'
					}

				],
				email: [
					{ required: false, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
				],
				role: [
					{ required: true }
				]
			},
		};
	},
	methods: {
		cancelForm: function () {
			this.dialogData.showEditDialog = false;
		},
		submitForm: function () {
			// 验证表单并提交 Model
			this.$refs["model"].validate((isValid) => {
				if (!isValid) return;
				var type = this.model.id == 0 ? "post" : "put";
				console.log(this.model.id);
				if (this.model.id == 0) {
					//新增用户
					this.$Request
						.fetch_("/api/rentuser/user", type, this.model)
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
								this.$refs["model"].resetFields();
								this.dialogData.showEditDialog = false;

								this.$emit("emitDialogData", this.dialogData.showEditDialog);
							} else {
								this.$message.info(result.message);
							}
						})
						.catch((error) => {
							console.log(error);
						});
				} else {
					//修改用户
					this.$Request
						.fetch_("/api/rentuser/user", type, this.model)
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
								this.$refs["model"].resetFields();
								this.dialogData.showEditDialog = false;

								this.$emit("emitDialogData", this.dialogData.showEditDialog);
							} else {
								this.$message.info(result.message);
							}
						})
						.catch((error) => {
							console.log(error);
						});
				}

			});
		},

	},
	watch: {
		// 监听 dialogData.id，初始化模型
		dialogData: function (newVal, oldVal) {
			console.log(this.dialogData);
			if (newVal.id == 0) {
				if (typeof this.$refs["model"] != "undefined") {
					// 重置 model
					this.model = {
						id: 0,
						userName: "",
						password: "",
					};
					this.$refs["model"].resetFields();
				}
			} else {
				var url = "/api/rentuser/user/" + this.dialogData.id;
				this.$Request
					.fetch(url)
					.then((result) => {
						this.model = result;
					})
					.catch((error) => {
						console.log(error);
					});
			}
		},
	},
};
</script>

<style scoped>
.el-select,
.el-input {
	width: 240px;
	float: left;
	margin-left: 10px;
}
</style>